<template>
  <div v-show="!hideRight" :class="'homeRight-container ' +($Ctl.isCs(true)?'cs-bg':'gradation-bg')">
    <!-- 多单位首页 -->
    <template v-if="isMuilUnitUser">
      <multiple-units-home-right v-if="homeType == 1 && homeType != 3"></multiple-units-home-right>
      <single-unit-home-right v-if="homeType == 2 && homeType != 3 && active" :parames="singleParames"></single-unit-home-right>
    </template>
    <!-- 单单位首页 -->
    <template v-else>
      <single-unit-home-right v-if="homeType != 3 && active" :parames="singleParames"></single-unit-home-right>
    </template>
    <!-- 右侧子页面 -->
    <child-right v-if="homeType == 3 && active" :parames="childParames"></child-right>
  </div>
</template>

<script>
import MultipleUnitsHomeRight from "./RightModel/MultipleUnitsHomeRight"; // 多单位首页
import SingleUnitHomeRight from "./RightModel/SingleUnitHomeRight"; // 单单位首页
import ChildRight from "@/components/Child/ChildRight"; //右侧子页面
export default {
  name: "HomeRight",
  components: {
    MultipleUnitsHomeRight,
    SingleUnitHomeRight,
    ChildRight,
  },
  data() {
    return {
      active: true,
      homeType: 1, //1:多单位 2:单单位首页 3:左边子页面
      hideRight: false,
      singleParames: {
        orgId: this.$store.state.userInfo.organizationIds,
        orgName: this.$store.state.userInfo.org.name,
      }, // 单单位首页参数
      childParames: {
        // pageName:'Maintenance'
      }, // 子页面参数
      isMuilUnitUser: this.$store.state.userInfo.isMuilUnitUser, //0:单单位用户;1:多单位用户
    };
  },
  created: function () {
    let that = this;
    /*
     * 改变右侧展示模块方法
     */
    window.FunList.changeRightModelShow = this.changeModel;

    that.$Ctl.isCs() && that.$Cs.loadingControl(10402);
  },
  methods: {
    /*
     *  =======控制右侧显示内容方法=======
     * 【参数说明】：
     *    type -- 展示模块id（1：多单位； 2：单单位；3：子页面）
     *    parames -- 页面传递的参数，Object类型
     *    callback  --  回调（备用）
     */
    changeModel(type, parames, callback) {
      this.hideRight = false;
      // 根据列表改变右侧展示大小
      if (type == "MapEquipment") {
        window.FunList.changeRightModel_MapEquipmentRight &&
          window.FunList.changeRightModel_MapEquipmentRight(parames);
      } else if (type == "Inspection") {
        window.FunList.changeRightModel_InspectionRight &&
          window.FunList.changeRightModel_InspectionRight(parames);
      } else if (type == "Maintenance") {
        window.FunList.changeRightModel_MaintainRight &&
          window.FunList.changeRightModel_MaintainRight(parames);
      } else if (type == "CellCenter") {
        // 只显示左侧一边
        this.hideRight = true;
      } else {
        // 显示对应的模块
        this.homeType = type || 1;
        if (parames && type == 2) {
          this.singleParames = parames;
        }
        if (parames && type == 3) {
          this.childParames = parames;
        }
        //为了解决电气火灾返回过快不显示问题
        this.$nextTick(() => this.$Ctl.resizeCharts());
      }
      if (parames && parames.isRefresh) {
        this.active = false;
        this.$nextTick(() => {
          this.active = true;
        });
      }
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss">
.homeRight-container {
  height: 100%;
  display: flex;
  &.cs-bg {
    background-color: #000;
    //background: url(../../assets/images/csbg/bg-right-l.png) no-repeat 0 0/100%  100%;
  }
  &.gradation-bg {
    // background: -webkit-linear-gradient(to left, rgba(6, 23, 35, 0.9), rgba(6, 23, 35, 0.9), rgba(6, 23, 35, 0.8), rgba(6, 23, 35, 0.7), rgba(6, 23, 35, 0.6), rgba(6, 23, 35, 0.6), rgba(6, 23, 35, 0.45),rgba(6, 23, 35, 0)); /* Safari 5.1-6.0 */
    // background: -o-linear-gradient(to left, rgba(6, 23, 35, 0.9), rgba(6, 23, 35, 0.9), rgba(6, 23, 35, 0.8), rgba(6, 23, 35, 0.7), rgba(6, 23, 35, 0.6), rgba(6, 23, 35, 0.6), rgba(6, 23, 35, 0.45),rgba(6, 23, 35, 0)); /* Opera 11.1-12.0 */
    // background: -moz-linear-gradient(to left, rgba(6, 23, 35, 0.9), rgba(6, 23, 35, 0.9), rgba(6, 23, 35, 0.8), rgba(6, 23, 35, 0.7), rgba(6, 23, 35, 0.6), rgba(6, 23, 35, 0.6), rgba(6, 23, 35, 0.45),rgba(6, 23, 35, 0)); /* Firefox 3.6-15 */
    background: linear-gradient(
      to left,
      rgba(6, 23, 35, 0.9),
      rgba(6, 23, 35, 0.9),
      rgba(6, 23, 35, 0.8),
      rgba(6, 23, 35, 0.7),
      rgba(6, 23, 35, 0.5),
      rgba(6, 23, 35, 0.3),
      rgba(6, 23, 35, 0)
    ); /* 标准语法 */
  }
}
</style>
